import { Directive, ElementRef, Input, Renderer2, OnInit, HostListener } from '@angular/core';

@Directive({
  selector: '[appGridItemImage]',
})
export class GridItemImageDirective implements OnInit {
  @Input() appGridItemImage = '4rem';
  // @Input() fitMode = 'none';
  @Input() fitMode = 'cover';  // 图片正常显示
  constructor(private elr: ElementRef, private rd2: Renderer2) { }

  ngOnInit(): void {
    this.setStyle('grid-area', 'image');
    this.setStyle('width', this.appGridItemImage);
    this.setStyle('height', this.appGridItemImage);
    this.setStyle('object-fit', this.fitMode);
  }

  private setStyle (styleName: string, styleValue: string) {
    this.rd2.setStyle(this.elr.nativeElement, styleName, styleValue)
  }

  // @HostListener('click', ['$event.target'])
  // handleClick (ev) {
  //   console.log(11, ev)
  // }
}